<extend name="Layout:base_member"/>

<!-- 登录主体部分start -->
<block name="main">
    <div class="login w990 bc mt10 regist">
        <div class="login_hd">
            <h2>用户注册</h2>
            <b></b>
        </div>
        <div class="login_bd">
            <div class="login_form fl">
                <form action="{:U()}" method="post" id="reg">
                    <ul>
                        <li>
                            <label>用户名：</label>
                            <input type="text" class="txt" name="username"/><span class="error-msg"></span>

                            <p>3-20位字符，可由中文、字母、数字和下划线组成</p>
                        </li>
                        <li>
                            <label>密码：</label>
                            <input type="password" class="txt" name="password" id="password"/><span
                                class="error-msg"></span>

                            <p>6-20位字符，可使用字母、数字和符号的组合，不建议使用纯数字、纯字母、纯符号</p>
                        </li>
                        <li>
                            <label>确认密码：</label>
                            <input type="password" class="txt" name="repassword"/><span class="error-msg"></span>

                            <p><span>请再次输入密码</p>
                        </li>
                        <li>
                            <label>邮箱：</label>
                            <input type="text" class="txt" name="email"/><span class="error-msg"></span>

                            <p>邮箱必须合法</p>
                        </li>
                        <li>
                            <label>手机号码：</label>
                            <input type="text" class="txt" value="" name="tel" id="tel" placeholder=""/><span
                                class="error-msg"></span>
                        </li>
                        <li>
                            <label>短信验证：</label>
                            <input type="text" class="txt" value="" placeholder="请输入短信验证码" name="sms"
                                   disabled="disabled" id="captcha"/> <input type="button" onclick="bindPhoneNum(this)"
                                                                             id="get_captcha" value="获取验证码"
                                                                             style="height: 25px;padding:3px 8px"/><span
                                class="error-msg"></span>

                        </li>
                        <li class="checkcode">
                            <label>验证码：</label>
                            <input type="text" name="checkcode"/>
                            <img id="checkcode" src="{:U('Captcha/code')}" title="点击换图" onclick='this.src="{:U('Captcha/code')}"'/><span
                                class="error-msg"></span>
                        </li>

                        <li>
                            <label>&nbsp;</label>
                            <input type="checkbox" name="agree" class="chb"/> 我已阅读并同意《用户注册协议》<span
                                class="error-msg"></span>
                        </li>
                        <li>
                            <label>&nbsp;</label>
                            <input type="submit" value="" class="login_btn"/>
                        </li>
                    </ul>
                </form>


            </div>

            <div class="mobile fl">
                <h3>手机快速注册</h3>

                <p>中国大陆手机用户，编辑短信 “<strong>XX</strong>”发送到：</p>

                <p><strong>1069099988</strong></p>
            </div>

        </div>
    </div>
    <!-- 登录主体部分end -->
</block>
<block name="js">
    <script type="text/javascript" src="__JS__/jquery.validate.min.js"></script>
    <script type="text/javascript" src="__LAYER__/layer.js"></script>
    <script type="text/javascript">
        //初始化验证规则
        $('#reg').validate({
            rules: {
                //验证用户名
                username: {
                    required: true,
                    rangelength: [3, 20],
                    remote: '{:U("verifyParam")}',//ajax请求地址,验证用户名是否被注册
                },
                //验证密码
                password: {
                    required: true,
                    rangelength: [6, 20],
                },
                //验证二次输入的密码
                repassword: {
                    required: true,
                    equalTo: '#password',   //id选择器
                },
                //验证email是否合法
                email: {
                    required: true,
                    email: true,
                    remote: '{:U("verifyParam")}',//ajax请求地址,验证邮箱是否被占用
                },
                //验证电话号码是否合法
                tel: {
                    required: true,
                    mobileNumber: true,
                    remote: '{:U("verifyParam")}',//ajax请求地址
                },
                captcha: "required",
                checkcode: "required",
                agree: "required",
            },

            //验证提示信息
            messages: {
                username: {
                    required: "用户名不能为空",
                    rangelength: "用户名长度应是3-20位",
                    remote: "用户名已存在",
                },
                password: {
                    required: "密码不能为空",
                    rangelength: "密码长度应是6-20位",
                },
                repassword: {
                    required: "请再次输入您的密码",
                    equalTo: "两次密码不一致",
                },
                email: {
                    required: "邮箱不能为空",
                    email: "邮箱不合法",
                    remote: "邮箱已被注册",
                },
                tel: {
                    required: "手机号码不能为空",
                    remote: "手机号码已被注册",
                },
                captcha: "验证码不能为空",
                checkcode: "验证码不能为空",
                agree: "必须同意许可协议",
            },

            //将错误信息放入指定位置
            errorPlacement: function (error, element) {
                var errMsg = error[0].innerHTML;
                var place = $(element).siblings('.error-msg');
                //输出错误信息
                place.html(errMsg)
            },
            //成功后执行的函数
            success: function () {},
        });

        //自定义验证规则
        $.validator.addMethod("mobileNumber", function (tel) {

            return /^1[34578]\d{9}$/.test(tel);

        }, "请正确填写11位手机号码");

        //发送验证码时间
        function bindPhoneNum() {
            //启用输入框
            $('#captcha').prop('disabled', false);

            //发送验证码
            var url = '{:U("sendSms")}';
            var data = {tel: $('#tel').val()};
            $.getJSON(url, data, function (data) {
                console.debug(data);
                if(data.status == true){
                    layer.alert(data.msg, {icon: 6});
                }

                if(data.status == false){
                    layer.alert(data.msg, {icon: 5});
                }
            });

            var time = 60;
            var interval = setInterval(function () {
                time--;
                if (time <= 0) {
                    clearInterval(interval);
                    var html = '获取验证码';
                    $('#get_captcha').prop('disabled', false);
                } else {
                    var html = time + ' 秒后再次获取';
                    $('#get_captcha').prop('disabled', true);
                }

                $('#get_captcha').val(html);
            }, 1000);
        }
    </script>
</block>
